<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学习强国App首页</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        header {
            background-image:url("img/素材3.png");
            width: auto;
            height: 240px;
            text-align: center;
        }
        .nav1,.nav2{
            font-size: 18px;
            display: flex;
            justify-content: space-around;
            background-color: #D3D3D3;
            text-align:center;
        }
        .nav1 a {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 3px;
            margin-bottom: 3px;
            color: black;
            text-decoration: none;
        }
        .nav2 a {
            margin-left: 10px;
            margin-right: 10px;
            margin-top: 5px;
            margin-bottom: 5px;
            color: black;
            text-decoration: none;
        }
        .nav1 a:hover {
            color: red;
        }
        .nav2 a:hover {
            color: red;
        }
        main {
            padding: 20px;
        }
        main h2{
            font-size: 35px;
            color: red;
            text-align:center;
        }
        main p{
            text-align:center;
        }
        main a {
            color: red;
            text-decoration: none;
        }
        main a:hover {
            background-color: #ddd;
            color: red;
        }
        footer {
            background-color: #f5f5f5;
            padding: 20px;
            text-align: center;
        }
        hr{
            width: 1100px;
        }
        section{
            margin-top: 370px;
            height: 380px;
            background-color: #b9a0ae7a ;
        }
        .container {
        width: 1100px;
       margin-left: 380px;
       margin-right: 380px;
       
    }
    #nav3{
        width: 700px;
       text-align: right;
    }
    #nav3 a {
        margin-left: 10px;
        margin-right: 10px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-decoration: none; 
        color: black; 
        display: inline-block;
        margin-right: 10px;
    }

    #nav3 a:hover {
        color: red;
    }
    .nav4{
        margin-top: -350px;
        margin-left: 840px;
    }
    #div1{
        margin-left: 1530px;
        margin-top: -870px;
    }
    #nav5 a {
        text-align: center;
        font-size: 20px;
        width: 100px;
        height: 30px;
        margin-top: 5px;
        margin-bottom: 5px;
        text-decoration: none; 
        background-color: #D3D3D3;
        color: black; 
        display: inline-block;
        margin-right: 10px;
    }

    #nav5 a:hover {
        background-color: #8B4513;
        color: wheat;
    }

        .slider {
            margin: auto;
            width: 1100px;
            height: 700px;
            overflow: hidden;
            position: relative;
        }
        .slider img {
            width: 1100px;
            height: 700px;
            display: none;
        }
        .slider img.active {
            display: block;
        }
    </style>    
</head>
<body>
    <header>
    
    </header>
        <nav class="nav1"><p>
            <a href="#">思想</a>
            <a href="#">二十大时间</a>
            <a href="#">习近平文汇</a>
            <a href="#">学习理论</a>
            <a href="#">红色中国</a>
            <a href="#">学习科学</a>
            <a href="#"><img src="img/素材.png"></a>
        </p></nav>
        <nav class="nav2"><p>
            <a href="#">国际</a>
            <a href="#">五个一工程</a>
            <a href="#">学习电视台</a>
            <a href="#">学习电台</a>
            <a href="#">强军兴军</a>
            <a href="#">学习文化</a>
            <a href="#"><img src="img/素材2.png"></a>
        </p></nav>
    <main>
        <h2>习近平致电祝贺夏巴兹当选巴基斯坦总理</h2>
        <p>习近平：共同打造中巴经济走廊建设升级版，持续深化中巴全天候战略合作伙伴关系，构建新时代更加紧密的中巴命运共同体&nbsp;&nbsp;<a href="#">更多头条</a></p>
        <hr style='background-color: red; height: 1px; border: none;'/>
        <hr style='background-color: red; height: 4px; border: none;'/>
    </main>
    <div class="slider">
        <img src="img/素材4.jpg" alt="图片1" class="active">
        <img src="img/素材4.jpg" alt="图片2">
        <img src="img/素材4.jpg" alt="图片3">
        <img src="img/素材4.jpg" alt="图片4">
        <img src="img/素材4.jpg" alt="图片5">
        <img src="img/素材4.jpg" alt="图片6">
    </div>
    <script>
        const images = document.querySelectorAll('.slider img');
        let currentIndex = 0;

        function changeImage() {
            images[currentIndex].classList.remove('active');
            currentIndex = (currentIndex + 1) % images.length;
            images[currentIndex].classList.add('active');
        }

        setInterval(changeImage, 3000);
    </script>
    <div id="div1">
        <nav id="nav5">
            <a href="#">站内搜索</a>
            <br>
            <a href="#">我的学习</a>
            <br>
            <a href="#">我的书房</a>
            <br>
            <a href="#">我的积分</a>
            <br>
            <a href="#">我要投稿</a>
            <br>
            <a href="#">建议反馈</a>
            <br>
            <a href="#">开放平台</a>
        </nav>
        <img src="img/素材11.png">
    </div>
    <section>
        <div class="container">
        <nav id="nav3"><P>
            <a id="open" href="#">打开</a>
            <br>
            <a href="#">习近平在2024年春季学期中央党校国家</a>
            <a href="#">习近平致电祝贺舒尤克当选匈牙利总统</a>
            <br>
            <a href="#">《习近平关于尊重和保障人权论述摘编》</a>
            <a href="#">习近平主持二十届中共中央政治局第十二次…</a>
            <br>
            <a href="#">中共中央政治局召开会议;讨论政府工作报…&nbsp;</a>
            <a href="#">《求&nbsp;是》杂志发表习近平总书记重要文章&nbsp;&nbsp;&nbsp;</a>
            <br>
            <a href="#">习近平：加强和改进人民政协工作&nbsp;全面发…</a>
            <a href="#">习近平为第六批全国千部学习培训教材作序</a>
            <br>
            <a href="#"><img src="img/素材5.png" ></a>
            <a href="#"><img src="img/素材6.png" ></a>
            <br>
            <a href="#"><img src="img/素材7.png" ></a>
            <a href="#"><img src="img/素材8.png" ></a>
        </P></nav>

        <nav class="nav4">
            <a href="#"><img src="img/素材9.png" ></a>
        </nav>
        </div>
    </section>
    <footer>
        <img src="img/素材10.png">
    </footer>
    
</body>
</html>
